<template>
  <div>
    <!-- 南窗 -->
    <div class="window-box">
      <h4 class="text-box">南窗</h4>
      <img src="../../assets/家具-窗户.png" alt="" class="img-window" v-for="item of 4" :key="item">
    </div>
    <!-- 座位区域 -->





    <div class="btn-container" v-for="(item,index) in infoList2" :key="index">
      <div class="btn-box" v-for="(item2,site) in item" :key="site">       
    <el-popover class="txt1"
                placement="right"
                width="600"
                trigger="click" v-if="item2.yid%2!==0">
      <el-descriptions title="学生信息">                      
        <el-descriptions-item label="姓名">{{item2.name}}</el-descriptions-item>
        <el-descriptions-item label="学号">{{item2.number}}</el-descriptions-item>
        <el-descriptions-item label="性别">
      <span v-if="item2.sex == '0'">女</span>
      <span v-else>男</span>
      </el-descriptions-item>
        <el-descriptions-item label="专业">{{item2.major}}</el-descriptions-item>
        <el-descriptions-item label="年级">{{item2.grade}}</el-descriptions-item>
        <el-descriptions-item label="现是否考研">
      <span v-if="item2.postgraduate == '0'">不考研</span>
      <span v-else>考研</span>
    </el-descriptions-item>
    <el-descriptions-item label="手机号">{{item2.tel}}</el-descriptions-item>
    <el-descriptions-item label="邮箱">{{item2.email}}</el-descriptions-item>
    <el-descriptions-item label="组号">{{item2.whichgroup}}</el-descriptions-item>
  </el-descriptions>
  <el-button slot="reference" v-if="item2.name==null" disabled class="btnInfo">
    <span>{{item2.xid}}{{item2.yid}}{{item2.zid}}</span>
    <img class="img-container" src="../../assets/desktop-before-1.png" alt="">
  </el-button>
  <el-button slot="reference" v-else>
    <span>{{item2.xid}}{{item2.yid}}{{item2.zid}}</span>
    <img class="img-container" src="../../assets/desktop-after-1.png" alt="">
  </el-button>
    </el-popover>
    <el-popover class="txt2"
  placement="right"
  width="600"
  trigger="click" v-else>
  <el-descriptions title="学生信息">                      
    <el-descriptions-item label="姓名">{{item2.name}}</el-descriptions-item>
    <el-descriptions-item label="学号">{{item2.number}}</el-descriptions-item>
    <el-descriptions-item label="性别">
      <span v-if="item2.sex == '0'">女</span>
      <span v-else>男</span>
    </el-descriptions-item>
    <el-descriptions-item label="专业">{{item2.major}}</el-descriptions-item>
    <el-descriptions-item label="年级">{{item2.grade}}</el-descriptions-item>
    <el-descriptions-item label="现是否考研">
      <span v-if="item2.postgraduate == '0'">不考研</span>
      <span v-else>考研</span>
    </el-descriptions-item>
    <el-descriptions-item label="手机号">{{item2.tel}}</el-descriptions-item>
    <el-descriptions-item label="邮箱">{{item2.email}}</el-descriptions-item>
    <el-descriptions-item label="组号">{{item2.whichgroup}}</el-descriptions-item>
</el-descriptions>
   <el-button slot="reference" v-if="item2.name==null" class="btnInfo" disabled>
    
    <img class="img-container" src="../../assets/desktop-before-2.png" alt="">
    <span>{{item2.xid}}{{item2.yid}}{{item2.zid}}</span>
  </el-button>
  <el-button slot="reference" v-else>
    <img class="img-container" src="../../assets/desktop-after-2.png" alt="">
    <span>{{item2.xid}}{{item2.yid}}{{item2.zid}}</span>
  </el-button>
     </el-popover> 
      </div>
    </div>






    <!-- 走廊 -->
    <div class="door-box">
      <h4 class="code1">
        东
        <img src="../../assets/door.png" alt="" class="doorFront" >
      </h4>
 
   <h4 class="code2">
    
    <img src="../../assets/door.png" alt="" class="doorBehind" >
    西
   </h4>   
    </div>
  </div> 
</template>

<script>
export default {
  data(){
    return{
      infoList2:''
    }  
  },
  mounted(){
    this.getInfoList()
  },
  methods:{
      async getInfoList(){
        let result = await this.$API.reqSelectStudentByYids(1)
        this.infoList2 = result.data.data;
      }
  }
}
</script>

<style lang="less" scoped >
.img-container{
  height: 40px;
  width: 30px;
  float: left;
  margin-top: 5px;
  margin-left: 15px;

}
.btn-container{
  margin-top:60px;
  margin-left: 20px;
  float:left;
}
.btnInfo{
  pointer-events:none
}
.doorFront{
  width:60px;
  height:70px;
}
.doorBehind{
  width:60px;
  height:70px;
}
.code1{
  margin-top: 80px;
  float:left;
}
.code2{
  margin-top: 80px;
  float:right;
}
.text-box{
  text-align: center;
}
.img-window{
  height: 60px;
  width: 80px;
  margin-left: 200px;
}
.txt2{
  margin-right: 20px;
}
.txt2{
  margin-left: -30px;
}
</style>